<template>
    <el-dialog :title="titleMap[mode]" v-model="visible" draggable :show-fullscreen="true" :width="500" destroy-on-close @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode=='show'" ref="dialogForm" label-width="120px" label-position="left">
            <el-form-item label="会员ID" prop="user_id">
                <el-input-number v-model="form.user_id"></el-input-number>
        	</el-form-item>
            <el-form-item label="管理员ID" prop="admin_id">
                <el-input-number v-model="form.admin_id"></el-input-number>
        	</el-form-item>
            <el-form-item label="分类ID(单选)" prop="category_id">
                <el-input-number v-model="form.category_id"></el-input-number>
        	</el-form-item>
            <el-form-item label="分类ID(多选)" prop="category_ids">
                <el-input v-model="form.category_ids" clearable></el-input>
        	</el-form-item>
            <el-form-item label="标签" prop="tags">
                <el-input v-model="form.tags" clearable></el-input>
        	</el-form-item>
            <el-form-item label="星期(单选):monday=星期一,tuesday=星期二,wednesday=星期三" prop="week">
                <el-select v-model="form.week" clearable placeholder="请选择星期(单选):monday=星期一,tuesday=星期二,wednesday=星期三">
            <el-option v-for="(item,index) in week_option" :key="index" :label="item" :value="index"></el-option>
        </el-select>
        	</el-form-item>
            <el-form-item label="标志(多选):hot=热门,index=首页,recommend=推荐" prop="flag">
                <el-select v-model="form.flag" clearable placeholder="请选择标志(多选):hot=热门,index=首页,recommend=推荐">
            <el-option v-for="(item,index) in flag_option" :key="index" :label="item" :value="index"></el-option>
        </el-select>
        	</el-form-item>
            <el-form-item label="性别(单选):male=男,female=女" prop="genderdata">
                <el-select v-model="form.genderdata" clearable placeholder="请选择性别(单选):male=男,female=女">
            <el-option v-for="(item,index) in genderdata_option" :key="index" :label="item" :value="index"></el-option>
        </el-select>
        	</el-form-item>
            <el-form-item label="爱好(多选):music=音乐,reading=读书,swimming=游泳" prop="hobbydata">
                <el-checkbox-group v-model="form.hobbydata">
            <el-checkbox v-for="(item,index) in hobbydata_option" :key="index" :label="index">{{item}}</el-checkbox>
        </el-checkbox-group>
        	</el-form-item>
            <el-form-item label="标题" prop="title">
                <el-input v-model="form.title" clearable></el-input>
        	</el-form-item>
            <el-form-item label="内容" prop="content">
                <el-input type="textarea" v-model="form.content"></el-input>
        	</el-form-item>
            <el-form-item label="图片" prop="image">
                <sc-upload v-model="form.image" icon="el-icon-picture-outline"></sc-upload>
        	</el-form-item>
            <el-form-item label="图片组" prop="images">
                <sc-upload-multiple v-model="form.images"></sc-upload-multiple>
        	</el-form-item>
            <el-form-item label="附件" prop="attachfile">
                <el-input v-model="form.attachfile" clearable></el-input>
        	</el-form-item>
            <el-form-item label="关键字" prop="keywords">
                <el-input v-model="form.keywords" clearable></el-input>
        	</el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="form.description" clearable></el-input>
        	</el-form-item>
            <el-form-item label="省市" prop="city">
                <el-input v-model="form.city" clearable></el-input>
        	</el-form-item>
            <el-form-item label="配置:key=名称,value=值" prop="json">
                <el-input type="textarea" v-model="form.json"></el-input>
        	</el-form-item>
            <el-form-item label="二维数组:title=标题,intro=介绍,author=作者,age=年龄" prop="multiplejson">
                <el-checkbox-group v-model="form.multiplejson">
            <el-checkbox v-for="(item,index) in multiplejson_option" :key="index" :label="index">{{item}}</el-checkbox>
        </el-checkbox-group>
        	</el-form-item>
            <el-form-item label="价格" prop="price">
                <el-input-number v-model="form.price"></el-input-number>
        	</el-form-item>
            <el-form-item label="点击" prop="views">
                <el-input-number v-model="form.views"></el-input-number>
        	</el-form-item>
            <el-form-item label="时间区间" prop="workrange">
                <el-input v-model="form.workrange" clearable></el-input>
        	</el-form-item>
            <el-form-item label="开始日期" prop="startdate">
                <el-date-picker v-model="form.startdate" type="datetime"></el-date-picker>
        	</el-form-item>
            <el-form-item label="活动时间(datetime)" prop="activitytime">
                <el-date-picker v-model="form.activitytime" type="datetime"></el-date-picker>
        	</el-form-item>
            <el-form-item label="年" prop="year">
                <el-date-picker v-model="form.year" type="datetime"></el-date-picker>
        	</el-form-item>
            <el-form-item label="时间" prop="times">
                <el-date-picker v-model="form.times" type="datetime"></el-date-picker>
        	</el-form-item>
            <el-form-item label="刷新时间" prop="refreshtime">
                <el-date-picker v-model="form.refreshtime" type="datetime"></el-date-picker>
        	</el-form-item>
            <el-form-item label="创建时间" prop="createtime">
                <el-date-picker v-model="form.createtime" type="datetime"></el-date-picker>
        	</el-form-item>
            <el-form-item label="更新时间" prop="updatetime">
                <el-date-picker v-model="form.updatetime" type="datetime"></el-date-picker>
        	</el-form-item>
            <el-form-item label="删除时间" prop="deletetime">
                <el-date-picker v-model="form.deletetime" type="datetime"></el-date-picker>
        	</el-form-item>
            <el-form-item label="开关" prop="switch">
                <el-input-number v-model="form.switch"></el-input-number>
        	</el-form-item>
            <el-form-item label="状态" prop="status">
                <el-input v-model="form.status" clearable></el-input>
        	</el-form-item>
            <el-form-item label="状态值:0=禁用,1=正常,2=推荐" prop="state">
                <el-radio v-model="form.state" v-for="(item,index) in state_option" :key="index" :label="index">{{item}}</el-radio>
        	</el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="visible=false" >取 消</el-button>
            <el-button v-if="mode!='read'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
        </template>
    </el-dialog>
</template>

<script>
    
    export default {
        emits: ['success', 'closed'],
        
        data() {
            return {
                mode: "create",
                titleMap: {
                    read: '查看',
                    create: '新增',
                    update: '编辑',
                },
                visible: false,
                isSaveing: false,
                form: {
                    id: 0,
					user_id: '',
					admin_id: '',
					category_id: '',
					category_ids: '',
					tags: '',
					week: '',
					flag: '',
					genderdata: '',
					hobbydata: '',
					title: '',
					content: '',
					image: '',
					images: '',
					attachfile: '',
					keywords: '',
					description: '',
					city: '',
					json: '',
					multiplejson: '',
					price: '',
					views: '',
					workrange: '',
					startdate: '',
					activitytime: '',
					year: '',
					times: '',
					refreshtime: '',
					createtime: '',
					updatetime: '',
					deletetime: '',
					switch: '',
					status: '',
					state: '',
                },
                rules: {
                },
				week_option:{"monday":"星期一","tuesday":"星期二","wednesday":"星期三"},
				flag_option:{"hot":"热门","index":"首页","recommend":"推荐"},
				genderdata_option:{"male":"男","female":"女"},
				hobbydata_option:{"music":"音乐","reading":"读书","swimming":"游泳"},
				json_option:{"key":"名称","value":"值"},
				multiplejson_option:{"title":"标题","intro":"介绍","author":"作者","age":"年龄"},
				state_option:{"0":"禁用","1":"正常","2":"推荐"},
            }
        },
        methods: {
            open(mode='create'){
                this.mode = mode;
                this.visible = true;
                return this
            },
            submit(){
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        var res = await this.$API.test[this.mode].post(this.form);
                        this.isSaveing = false;
                        if(res.code == 200){
                            this.$emit('success', this.form, this.mode)
                            this.visible = false;
                            this.$message.success(res.message)
                        }else{
                            this.$alert(res.message, "提示", {type: 'error'})
                        }
                    }else{
                        return false;
                    }
                })
            },
            setData(data){
                this.$TABLE.assign(this,data);
            }
        }
    }
</script>